import React from 'react';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import QueueAnim from 'rc-queue-anim';
import { Carousel as AntCarousel, Row, Col } from 'antd';
import { getChildrenToRender } from './utils';

class Feature8 extends React.PureComponent {
  constructor(props) {
    super(props);
    this.carouselRef = React.createRef();
    this.state = {
      current: 0,
    };
  }

  onTitleClick = (_, i) => {
    const carouselRef = this.carouselRef.current.childRefs.carousel;
    carouselRef.goTo(i);
  };

  onBeforeChange = (_, newIndex) => {
    this.setState({
      current: newIndex,
    });
  };

  render() {
    const { dataSource, ...props } = this.props;
    const { current } = this.state;
    
    return (
      <div {...props} {...dataSource.wrapper}>
        <div {...dataSource.page}>
          <div {...dataSource.titleWrapper}>
            <div name="title" className="feature8-title-h1">使用流程</div>
            <div name="content" className="feature8-title-content">流程简单清晰，快速响应需求</div>
          </div>
          <OverPack {...dataSource.OverPack}>
            <QueueAnim
              key="queue"
              type="bottom"
              ref={this.carouselRef}
            >
              <div className="feature8-carousel-title-wrapper" key="title">
                <div className="feature8-carousel-title">
                  <div
                    className="feature8-carousel-title-block active"
                    onClick={(e) => { this.onTitleClick(e, 0); }}
                  >
                    平台自主训练流程
                  </div>
                </div>
              </div>
              
              <AntCarousel
                key="carousel"
                dots={false}
                className="feature8-carousel"
                infinite={false}
                beforeChange={this.onBeforeChange}
              >
                <div key="0">
                  <QueueAnim
                    component={Row}
                    type="bottom"
                    componentProps={{ type: 'flex' }}
                    className="feature8-block"
                    gutter={120}
                  >
                    <Col className="feature8-block-col" md={6} xs={24} key="0">
                      <div className="feature8-block-child">
                        <div name="image" className="feature8-block-image">
                          <img src="/images/d8933673-1463-438a-ac43-1a8f193ebf34.svg" alt="img" />
                        </div>
                        <div name="title" className="feature8-block-title">需求沟通</div>
                        <div name="content" className="feature8-block-content">沟通业务需求，对接人：诚凡、芸彩</div>
                      </div>
                      <div className="feature8-block-arrow">
                        <img src="/images/167bee48-fbc0-436a-ba9e-c116b4044293.svg" alt="img" />
                      </div>
                    </Col>
                    
                    <Col className="feature8-block-col" md={6} xs={24} key="1">
                      <div className="feature8-block-child">
                        <div name="image" className="feature8-block-image">
                          <img src="/images/d8933673-1463-438a-ac43-1a8f193ebf34.svg" alt="img" />
                        </div>
                        <div name="title" className="feature8-block-title">需求沟通</div>
                        <div name="content" className="feature8-block-content">沟通业务需求，对接人：诚凡、芸彩沟通业务需求，对接人：诚凡、芸彩</div>
                      </div>
                      <div className="feature8-block-arrow">
                        <img src="/images/167bee48-fbc0-436a-ba9e-c116b4044293.svg" alt="img" />
                      </div>
                    </Col>
                    
                    <Col className="feature8-block-col" md={6} xs={24} key="2">
                      <div className="feature8-block-child">
                        <div name="image" className="feature8-block-image">
                          <img src="/images/d8933673-1463-438a-ac43-1a8f193ebf34.svg" alt="img" />
                        </div>
                        <div name="title" className="feature8-block-title">需求沟通</div>
                        <div name="content" className="feature8-block-content">沟通业务需求，对接人：诚凡、芸彩沟通业务需求，对接人：诚凡、芸彩</div>
                      </div>
                      <div className="feature8-block-arrow">
                        <img src="/images/167bee48-fbc0-436a-ba9e-c116b4044293.svg" alt="img" />
                      </div>
                    </Col>
                    
                    <Col className="feature8-block-col" md={6} xs={24} key="3">
                      <div className="feature8-block-child">
                        <div name="image" className="feature8-block-image">
                          <img src="/images/d8933673-1463-438a-ac43-1a8f193ebf34.svg" alt="img" />
                        </div>
                        <div name="title" className="feature8-block-title">需求沟通</div>
                        <div name="content" className="feature8-block-content">沟通业务需求，对接人：诚凡、芸彩沟通业务需求，对接人：诚凡、芸彩</div>
                      </div>
                      <div className="feature8-block-arrow">
                        <img src="/images/167bee48-fbc0-436a-ba9e-c116b4044293.svg" alt="img" />
                      </div>
                    </Col>
                  </QueueAnim>
                </div>
                
                <div key="1">
                  <QueueAnim
                    component={Row}
                    type="bottom"
                    componentProps={{ type: 'flex' }}
                    className="feature8-block"
                    gutter={120}
                  >
                    <Col className="feature8-block-col" md={6} xs={24} key="0">
                      <div className="feature8-block-child">
                        <div name="image" className="feature8-block-image">
                          <img src="/images/d8933673-1463-438a-ac43-1a8f193ebf34.svg" alt="img" />
                        </div>
                        <div name="title" className="feature8-block-title">需求沟通</div>
                        <div name="content" className="feature8-block-content">沟通业务需求，对接人：诚凡、芸彩</div>
                      </div>
                      <div className="feature8-block-arrow">
                        <img src="/images/167bee48-fbc0-436a-ba9e-c116b4044293.svg" alt="img" />
                      </div>
                    </Col>
                    
                    <Col className="feature8-block-col" md={6} xs={24} key="1">
                      <div className="feature8-block-child">
                        <div name="image" className="feature8-block-image">
                          <img src="/images/d8933673-1463-438a-ac43-1a8f193ebf34.svg" alt="img" />
                        </div>
                        <div name="title" className="feature8-block-title">需求沟通</div>
                        <div name="content" className="feature8-block-content">沟通业务需求，对接人：诚凡、芸彩沟通业务需求，对接人：诚凡、芸彩</div>
                      </div>
                      <div className="feature8-block-arrow">
                        <img src="/images/167bee48-fbc0-436a-ba9e-c116b4044293.svg" alt="img" />
                      </div>
                    </Col>
                    
                    <Col className="feature8-block-col" md={6} xs={24} key="2">
                      <div className="feature8-block-child">
                        <div name="image" className="feature8-block-image">
                          <img src="/images/d8933673-1463-438a-ac43-1a8f193ebf34.svg" alt="img" />
                        </div>
                        <div name="title" className="feature8-block-title">需求沟通</div>
                        <div name="content" className="feature8-block-content">沟通业务需求，对接人：诚凡、芸彩沟通业务需求，对接人：诚凡、芸彩</div>
                      </div>
                      <div className="feature8-block-arrow">
                        <img src="/images/167bee48-fbc0-436a-ba9e-c116b4044293.svg" alt="img" />
                      </div>
                    </Col>
                    
                    <Col className="feature8-block-col" md={6} xs={24} key="3">
                      <div className="feature8-block-child">
                        <div name="image" className="feature8-block-image">
                          <img src="/images/d8933673-1463-438a-ac43-1a8f193ebf34.svg" alt="img" />
                        </div>
                        <div name="title" className="feature8-block-title">需求沟通</div>
                        <div name="content" className="feature8-block-content">沟通业务需求，对接人：诚凡、芸彩沟通业务需求，对接人：诚凡、芸彩</div>
                      </div>
                      <div className="feature8-block-arrow">
                        <img src="/images/167bee48-fbc0-436a-ba9e-c116b4044293.svg" alt="img" />
                      </div>
                    </Col>
                  </QueueAnim>
                </div>
              </AntCarousel>
              
              <div key="button" className="feature8-button-wrapper">
                <a name="button" className="feature8-button" href="#">立即体验</a>
              </div>
            </QueueAnim>
          </OverPack>
        </div>
      </div>
    );
  }
}
export default Feature8;
